<!--事件处理-->
<!--v-on指令(简写为@)来监听DOW事件 例如v-on:click="doSomething"简写为@click="doSomething"-->
<template>
    <h3>事件处理</h3>
    <p>{{ count }}</p>
    <button @click="addCount">点我自增</button>
    <h3>事件传参</h3>
    <!--以后要传递参数和event事件对象,可以添加$event参数-->
    <p @click="getName(name,$event)" v-for="(name,index) in names" key="index">{{ name }}</p>
    <h3>事件修饰符</h3>
    <!--.stop:阻止事件冒泡 .prevent:阻止默认行为 .self:只对当前元素有效-->
    
</template>

<script>
    export default{
        //数据
        data(){
            return {
                count:0,
                names:["zhangsan","lisi","wangwu"]
                
            }
        },
        //方法
        methods:{
            //event对象
            
            addCount(e){
                //读取到data里面数据的方案:this.count
                e.target.innerHTML = "点我自增" + this.count
                this.count++
            },
            
            //事件参数,可以给事件传递参数
            getName(name,e){
                console.log(name)
            }

        }
    }
</script>